其實我覺得工程師要靠配色去創造不同的風格，還有美學真的是有難度
而且像是自然風網站/復古風網站
這兩種截然不同的風格的內容範例，
要工程師去想真的是要有想像力啊~
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View
這裡都只有Controllers裡面的Entities>產生畫面View
或許後面不夠寫會再回頭創造出資料表的連結也是有可能的，可以期待~
自然風網站
https://laihao2.com/Home/Contact14
只有Controllers裡面的Entities>產生畫面View
Controllers裡面的Entities
public ActionResult Contact14()
{
ViewBag.Message = "Your contact page.";
return View();
}
解釋程式碼
這段代碼是一個 ASP.NET MVC 控制器中的 Contact14 方法，用於處理與 "Contact" 頁面相關的請求。我們來逐步解釋它的結構和功能：
public ActionResult Contact14()ActionResult 方法，意味著它可以通過 HTTP 請求訪問。Contact14，通常與 "Contact" 頁面相關聯，但這里用了不同的名稱 Contact14，可能是另一個類似的頁面。ViewBag.Message = "Your contact page.";ViewBag，它是一個動態對象，允許你在控制器中向視圖傳遞數據。ViewBag.Message 被設置為 "Your contact page."，這條消息可以在視圖中顯示，通常用於頁面標題或說明文本。return View();Contact14.cshtml 的視圖文件。View() 方法會將 ViewBag 中的數據一起傳遞給視圖。Contact14 頁面（類似“聯系我們”頁面）的請求，設置一條消息，並將頁面渲染給用戶。產生畫面View程式碼
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
ViewBag.Title = "Contact14";
}
<div class="farm-wrapper">
<h3>作品-自然風網站</h3>
<h3>建置中</h3>
<div class="farm-content">
<head>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自然風網站</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="Content/css/reset.css">
<link rel="stylesheet" href="Content/css/farm-style.css">
<style>
body {
font-family: 'Georgia', serif;
background-color: #e0f7fa; /* 柔和的淺藍色背景 */
color: #4a4a4a; /* 深灰色字體 */
}
header {
background-image: url('nature-background.jpg'); /* 自然背景圖片 */
background-size: cover;
text-align: center;
color: #fff;
padding: 40px 0;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
gap: 20px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 18px;
padding: 10px 15px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.3); /* 半透明背景 */
transition: background-color 0.3s;
}
nav ul li a:hover {
background-color: rgba(0, 0, 0, 0.5);
}
section {
padding: 30px;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-bottom: 30px;
}
footer {
background-color: #00695c; /* 深綠色背景 */
text-align: center;
padding: 20px 0;
color: #fff;
}
</style>
</head>
<body>
<header>
<h1>我的自然風格網站</h1>
<nav>
<ul>
<li><a href="#about">關於我們</a></li>
<li><a href="#products">我們的產品</a></li>
<li><a href="#contact">聯繫我們</a></li>
</ul>
</nav>
</header>
<main>
<!-- 隨機提示語部分 -->
<section id="quote">
<p id="randomQuote"></p>
</section>
<!-- 關於我們部分，帶滾動顯示動畫 -->
<section id="about" class="fade-in">
<h2>關於我們</h2>
<p>我們是一家致力於可持續發展的公司，專註於將自然元素融入到每一個設計中。我們的團隊由一群充滿熱情和創造力的人組成，他們致力於通過產品讓人們感受到自然的美好。</p>
</section>
<!-- 我們的產品部分，帶滾動顯示動畫 -->
<section id="products" class="fade-in">
<h2>我們的產品</h2>
<p>用天然材料，結合現代設計理念，為您的生活帶來更多的舒適和美感。</p>
<ul>
<li>
<strong>產品一：</strong> 這款產品結合了傳統工藝和現代設計，適合各種場合使用。
</li>
<li>
<strong>產品二：</strong> 我們的第二款產品以其獨特的功能和美觀的外觀贏得了許多客戶的喜愛。
</li>
</ul>
</section>
<section id="faq">
<h2>常見問題解答</h2>
<dl>
<dt>我們如何確保產品的環保性？</dt>
<dd>我們嚴格選擇可持續的材料，並與認證的供應商合作。</dd>
<dt>如何維護我們的產品？</dt>
<dd>請參考我們的產品使用指南進行日常維護。</dd>
</dl>
</section>
<!-- 聯繫我們部分 -->
<section id="contact" class="fade-in">
<h2>聯繫我們</h2>
<p>歡迎通過電子郵件聯繫我們。</p>
<p>地址：1234 自然大道，地球村</p>
<p>電話：123 456 7890</p>
<p>電子郵件：jzs2home@hotmail.com</p>
<p>關註我們：<a href="#">Facebook</a> | <a href="#">Twitter</a></p>
</section>
</main>
<!-- JavaScript 部分 -->
<script>
// 隨機提示語
const quotes = [
"大自然是最偉大的藝術家。",
"保持與自然的連接，讓心靈放鬆。",
"每一片葉子都是自然的奇蹟。",
"呼吸大自然的氣息，享受當下的美好。"
];
function displayRandomQuote() {
const randomIndex = Math.floor(Math.random() * quotes.length);
document.getElementById('randomQuote').innerText = quotes[randomIndex];
}
// 當頁面加載時顯示隨機提示
window.onload = displayRandomQuote;
// 滾動顯示動畫
window.addEventListener('scroll', function () {
const fadeInElements = document.querySelectorAll('.fade-in');
fadeInElements.forEach(function (element) {
const rect = element.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom >= 0) {
element.classList.add('visible');
}
});
});
</script>
</body>
</html>
解釋程式碼
這段代碼是一個 ASP.NET MVC 視圖，展示了一個以“自然風”為主題的網站，頁面的設計靈感來自自然，通過柔和的顏色、自然元素和滾動動畫等進行呈現。頁面采用了 HTML、CSS 和 JavaScript 來增強用戶體驗，以下是對代碼的詳細解釋。
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }_Layout.cshtml 的布局文件。布局文件定義了網站的公共部分（例如頭部、頁腳等），確保頁面具有一致的結構。@{ ViewBag.Title = "Contact14"; }ViewBag.Title，將當前頁面的標題設為 "Contact14"，這個標題會顯示在瀏覽器的標簽頁中。<div class="farm-wrapper">div 包裹，並包含了兩個 <h3> 元素，表示該網站的名字是“自然風網站”，且目前處於建置中。<head> 和頁面樣式包含頁面的基本元數據、外部樣式表的引用以及內聯樣式：
<meta charset="UTF-8"> 設置了頁面的字符編碼為 UTF-8，確保頁面能正確顯示中文字符。<meta name="viewport" content="width=device-width, initial-scale=1.0"> 使頁面在移動設備上具有響應式布局。<link rel="stylesheet" href="css/style.css"> 和其他樣式引用外部的 CSS 文件來控制頁面的樣式。內聯 CSS 定義了頁面的核心樣式：
body { font-family: 'Georgia', serif; background-color: #e0f7fa; color: #4a4a4a; } 設置頁面字體為 Georgia，背景顏色為柔和的淺藍色，文字顏色為深灰色，營造出自然、清新和舒緩的視覺體驗。header { background-image: url('nature-background.jpg'); background-size: cover; } 為頁面的頭部添加了一張自然風景的背景圖片，並設置了背景填充。nav ul { display: flex; justify-content: center; } 將導航菜單設置為水平排列，並居中顯示，提升頁面的簡潔和美觀。.fade-in 和 .visible 類用於頁面滾動時觸發淡入動畫。<header> 元素定義了頁面的頭部區域，帶有自然背景圖片，居中的文字顏色為白色，標題為“我的自然風格網站”。<nav> 元素包含一個導航菜單，用戶可以點擊鏈接快速跳轉到頁面的不同部分，如“關於我們”、“我們的產品”和“聯繫我們”。<section id="quote"> 用於顯示一個隨機提示語，提示語通過 JavaScript 動態生成。<section id="about" class="fade-in"> 介紹了公司致力於可持續發展和自然元素融入設計的理念，內容通過滾動動畫（fade-in）淡入顯示，增強了用戶的視覺體驗。<section id="products" class="fade-in"> 介紹了公司的一些產品，使用列表形式展示了每個產品的詳細信息，如產品特點和設計理念，同樣采用了淡入動畫。<section id="faq"> 以問答形式呈現了常見問題，使用 <dl> 列表來展示每個問題和答案。<section id="contact" class="fade-in"> 提供了聯系信息，包括公司的地址、電話、電子郵件，以及社交媒體的鏈接。const quotes = [
"大自然是最偉大的藝術家。",
"保持與自然的連接，讓心靈放鬆。",
"每一片葉子都是自然的奇蹟。",
"呼吸大自然的氣息，享受當下的美好。"
];
function displayRandomQuote() {
const randomIndex = Math.floor(Math.random() * quotes.length);
document.getElementById('randomQuote').innerText = quotes[randomIndex];
}
window.onload = displayRandomQuote;
quotes 數組存儲了多條關於自然的提示語。displayRandomQuote 函數通過隨機選擇一個提示語，並將其插入到頁面的 randomQuote 元素中。window.onload 事件，當頁面加載時自動顯示隨機提示。window.addEventListener('scroll', function () {
const fadeInElements = document.querySelectorAll('.fade-in');
fadeInElements.forEach(function (element) {
const rect = element.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom >= 0) {
element.classList.add('visible');
}
});
});
scroll 事件監聽器檢測頁面滾動，當 .fade-in 元素進入視口時，添加 visible 類觸發 CSS 動畫，使元素淡入顯示。<!DOCTYPE html> 開始，並且包含完整的 <html>, <head>, 和 <body> 標簽，確保頁面在瀏覽器中正確渲染。該頁面使用了清新的自然風格設計，顏色柔和，帶有自然元素的背景圖片，通過滾動淡入動畫和隨機提示語功能，增強了用戶體驗。設計上注重環保和自然主題，適合與可持續發展和環保相關的網站項目。
復古風網站
https://laihao2.com/Home/Contact18
只有Controllers裡面的Entities>產生畫面View
Controllers裡面的Entities
public ActionResult Contact18()
{
ViewBag.Message = "Your contact page.";
return View();
}
解釋程式碼
這段代碼是一個 ASP.NET MVC 控制器中的 Contact18 動作方法，下面對其進行逐步解釋：
public ActionResult Contact18()Contact18，它返回一個 ActionResult 類型的結果。public，意味著可以從外部調用這個方法。ActionResult 是 ASP.NET MVC 中一個通用的返回類型，表示控制器動作方法的返回結果，可以是視圖、文件、JSON 數據等。ViewBag.Message = "Your contact page.";ViewBag，它是一個動態對象，允許你在控制器和視圖之間傳遞數據。ViewBag.Message 為視圖傳遞了一個字符串 "Your contact page."，該字符串可以在視圖中訪問並顯示。ViewBag 是一種用於臨時存儲數據的方式，數據只存在於一次 HTTP 請求中。視圖可以通過 @ViewBag.Message 來訪問這個信息。return View();View() 方法會返回與當前控制器動作同名的視圖。在這種情況下，Contact18 方法會返回 Contact18.cshtml 視圖（假設視圖存在）。View() 方法中傳入視圖名稱，比如 View("AnotherView")。Contact18 動作時，加載一個名為 Contact18 的視圖，並傳遞 "Your contact page." 作為頁面上的信息。@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
ViewBag.Title = "Contact18";
}
<div class="farm-wrapper">
<h3>作品-復古風網站</h3>
<h3>建置中</h3>
<div class="farm-content">
<head>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>復古風網站</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="Content/css/reset.css">
<link rel="stylesheet" href="Content/css/farm-style.css">
<style>
body {
font-family: 'Times New Roman', serif;
background-color: #f0e6d6;
color: #4b4b4b;
}
header {
text-align: center;
background-color: #dcdcdc;
padding: 30px;
border-bottom: 3px solid #b0b0b0;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
margin: 0 15px;
}
a {
text-decoration: none;
color: #3a3a3a;
font-weight: bold;
}
section {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
img {
border: 3px solid #b0b0b0;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
html {
scroll-behavior: smooth;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
border-radius: 8px; /* 增加圆角效果 */
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>復古時光</h1>
<nav>
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#about">關於</a></li>
<li><a href="#album">相簿</a></li>
<li><a href="#contact">聯絡</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>歡迎來到我的復古世界</h2>
<p>這裡充滿了懷舊的氛圍。</p>
<p>我們致力於重現20世紀中期的經典風格，從老式照片到復古家具，每一個細節都旨在帶你回到那個經典的時代。</p>
<p>我們提供一系列復古風格的服務，包括復古設計、修復古董、以及為活動提供復古主題的佈置。無論是婚禮還是生日派對，我們都能提供獨特的復古體驗。</p>
<img src="~/templates/webphoto.jpg" alt="My Photo" style="width: 200px; height: auto; float: left; " />
</section>
<section id="testimonials">
<h2>用戶評價</h2>
<p>"這個網站真的把我帶回到了我的童年時光，設計非常精緻！" - 張小姐</p>
<p>"每次來這裡都能感受到復古的魅力，服務非常周到。" - 李先生</p>
</section>
<section id="faq">
<h2>常見問題</h2>
<h3>如何預訂服務？</h3>
<p>您可以通過我們的頁面填寫表單，或直接致電我們的客服熱線進行預訂。</p>
</section>
<section>
<h2>我們的服務</h2>
<p>我們提供一系列復古風格的服務，包括設計。</p>
</section>
<section id="team">
<h2>我們的團隊</h2>
<p>我們由一群充滿熱情的設計師和工匠組成。我們的團隊致力於將經典與現代相結合，打造出最具特色的體驗。</p>
</section>
</main>
<button id="scrollTopBtn" onclick="scrollToTop()">返回頂部</button>
<button id="openModal">查看更多</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<p>期待與您見面。</p>
</div>
</div>
<script>
const photos = [
'old-photo.jpg',
'another-photo.jpg',
'yet-another-photo.jpg'
];
let currentIndex = 0;
function changePhoto() {
currentIndex = (currentIndex + 1) % photos.length;
document.getElementById('photo').src = photos[currentIndex];
}
const scrollTopBtn = document.getElementById('scrollTopBtn');
window.onscroll = function () {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollTopBtn.style.display = "block";
} else {
scrollTopBtn.style.display = "none";
}
};
function scrollToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
const modal = document.getElementById('myModal');
const openModalBtn = document.getElementById('openModal');
const closeModalSpan = document.getElementsByClassName('close')[0];
openModalBtn.onclick = function () {
modal.style.display = "block";
}
closeModalSpan.onclick = function () {
modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
解釋程式碼
這段代碼是一個 ASP.NET MVC 視圖文件，用於創建一個覆古風格的網站頁面。頁面由 HTML、CSS 和 JavaScript 組成，結合 ASP.NET 的 Razor 語法來渲染視圖。以下是詳細解釋：
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }_Layout.cshtml。布局頁面通常包含網頁的頭部、導航欄、腳部等通用部分，這樣可以避免在每個視圖中重覆編寫相同的結構。@{ ViewBag.Title = "Contact18"; }ViewBag 設置頁面的標題為 "Contact18"。ViewBag 是 ASP.NET MVC 提供的一種動態對象，允許在控制器和視圖之間傳遞數據。在布局頁面中，通常會使用 @ViewBag.Title 來顯示這個標題。<!DOCTYPE html> 開始，表明這是一個 HTML5 文檔。<html lang="zh-TW">：設置網頁語言為繁體中文。<meta charset="UTF-8"> 和 <meta name="viewport" content="width=device-width, initial-scale=1.0">：這些標簽用於確保網頁字符編碼正確，並在移動設備上具有良好的響應式顯示。body：設置覆古風格的字體（Times New Roman）、背景顏色為淺米黃色（#f0e6d6），文字顏色為深灰色（#4b4b4b）。header：設置頭部區域的背景色、邊框和內邊距，使其有覆古風格。nav ul：導航菜單的樣式，使用 inline-block 使菜單項水平排列。img：圖像的樣式，包括邊框、陰影和圓角，使其更有覆古感。.modal 和 .modal-content：模態窗口的樣式，用於創建一個彈出框效果，包含背景遮罩和圓角設計。<header>：頁面的頭部，顯示標題“復古時光”，並提供一個導航菜單，用戶可以點擊鏈接跳轉到不同的部分。<main>：主內容區域，包含多個 section 標簽，每個標簽代表頁面的一個部分。
歡迎來到我的復古世界：介紹了網站的覆古主題和相關服務。用戶評價：顯示用戶對網站的評價。常見問題：提供常見問題的回答。我們的服務 和 我們的團隊：分別介紹服務內容和團隊背景。photos 數組包含多個圖片路徑。changePhoto() 函數用於切換顯示的圖片。scrollTopBtn：一個按鈕，當用戶向下滾動頁面時會顯示，點擊該按鈕可以快速返回頁面頂部。window.onscroll 監聽滾動事件，控制按鈕的顯示與隱藏。scrollToTop() 用於將頁面滾動到頂部。#myModal 是一個模態窗口，當用戶點擊按鈕時，會顯示一個彈出框，內容為“期待與您見面”。openModalBtn.onclick 和 closeModalSpan.onclick 分別處理打開和關閉模態窗口的事件。window.onclick 確保用戶點擊模態窗口外部時也能關閉窗口。這個頁面主要展示了覆古風格的設計，通過覆古的配色、字體、內容布局等傳達了懷舊的主題，同時結合現代的交互功能，如圖片輪播、模態窗口等，提供了良好的用戶體驗。
大家明天見~
iThome鐵人賽
看影片追技術